$(()=> {
  // get dom elem
  let $width = $('#width'),
      $height = $('#height'),
      $btnCal = $('#calc'),
      $form   = $('#main'),
      $perimeter = $('#perimeter'),
      $widthValidate = $('#width-validate'),
      $heightValidate = $('#height-validate'),
      $area = $('#area');
    
  // 浮点摄入误差
  function roundFractional(x, n) {
    return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
  }
  
  //表单级校验
  //calc button click
  $btnCal.click(()=> {
    // get value
    let w = Number($width.val()),
        h = Number($height.val());
  
    //validate
    if(validate($width,$widthValidate)&&validate($height,$heightValidate)){
  
      // calc
      let p = (w + h) * 2,
          a = w * h;
      //output
      $perimeter.val(roundFractional(p,2));
      $area.val(roundFractional(a,2));
    }
  });
  
  //字符级校验
  //非法字符
  $width.keypress(function(e) {
    if(/[abdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(e.key)){
      e.preventDefault();
      return;
    }
    //合法字符
    var pos = e.target.selectionStart,
        con = e.target.value;
    //e和E，科学计数法指数符号
    if(e.key === 'e' || e.key === 'E'){
      //e和E不能出现在数字首位
      if(pos === 0)
        return false;
      //e和E不能出现在科学计数法的数字中
      if(con.indexOf('e') !== -1 || con.indexOf('E') !== -1)
        return false;
      //e和E不能出现在负号和小数点后面
      if(pos>0 && /[-.]/.test(con.slice(pos-1,pos)))
        return false;
      //e和E不能出现在小数点前面
      if(con.slice(pos,con.length).indexOf('.') != -1)
        return false;
    }

    //. 小数点
    if(e.key === '.'){
      //小数点不能出现在数字的首位
      if(pos === 0)
        return false;
      //小数点不能出现在小数中
      if(con.indexOf('.') != -1)
        return false;
      //小数点不能出现在负号以及e和E的后面
      if(pos>0 && /[-eE]/.test(con.slice(0,pos)))
        return false;
    }

    //- 负号
    if(e.key === '-'){
      //负号不能出现在数字的首位
      if(pos === 0)
        return false;
      //负号不能出现在数字和小数点的后面
      if(pos>0 && /[0-9.]/.test(con.slice(pos-1,pos)))
        return false;
      //负号不能重复出现
      if(pos>0 && con.indexOf('-') !== -1)
        return false;
    }
  });

  $height.keypress(function(e){
    if(/[abdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(e.key)){
      e.preventDefault();
      return;
    }
    //合法字符
    var pos = e.target.selectionStart,
        con = e.target.value;
    //e和E，科学计数法指数符号
    if(e.key === 'e' || e.key === 'E'){
      //e和E不能出现在数字首位
      if(pos === 0)
        return false;
      //e和E不能出现在科学计数法的数字中
      if(con.indexOf('e') !== -1 || con.indexOf('E') !== -1)
        return false;
      //e和E不能出现在负号和小数点后面
      if(pos>0 && /[-.]/.test(con.slice(pos-1,pos)))
        return false;
      //e和E不能出现在小数点前面
      if(con.slice(pos,con.length).indexOf('.') != -1)
        return false;
    }
    //. 小数点
    if(e.key === '.'){
      //小数点不能出现在数字的首位
      if(pos === 0)
        return false;
      //小数点不能出现在小数中
      if(con.indexOf('.') != -1)
        return false;
      //小数点不能出现在负号以及e和E的后面
      if(pos>0 && /[-eE]/.test(con.slice(0,pos)))
        return false;
    }
    
    //- 负号
    if(e.key === '-'){
      //负号不能出现在数字的首位
      if(pos === 0)
        return false;
      //负号不能出现在数字和小数点的后面
      if(pos>0 && /[0-9.]/.test(con.slice(pos-1,pos)))
        return false;
      //负号不能重复出现
      if(pos>0 && con.indexOf('-') !== -1)
        return false;
    }
  });


  //字段级校验
  /*
  $form.focusout((e) => {
    console.log(e.target);
  });
  */
  $width.focusout(() => {
    if(validate($width,$widthValidate)){
      $width.select();
    }
  });

  $height.focusout(() => {
    if(validate($height,$heightValidate)){
      $height.select();
    }
  });
});

function validate(input,output){
  //is empty
  if(input.val() === ''){
    output.html('该字段不能为空');
    return false;
  }else{
    output.html('');
  }

  //is number
  let val = Number(input.val());

  if(isNaN(val)){
    output.html('该字段应该是数值');
    return false;
  }else{
    output.html('');
  }

  //is +
  if(val < 0){
    output.html('该字段不能小于0');
    return false;
  }else{
    output.html('');
  }
  return true;
}


